<header class="l-header">
  <nav class="navbar">
    <h1 class="logo">
      <span class="logo-title">ShareDrop</span>
      <span class="logo-subtitle">P2P file transfer</span>
    </h1>

    <ul class="nav">
      <li>
        <a href="javascript:void(0)" class="icon-create-room" {{action "redirect"}} title="Create a room. You'll leave the room you're currently in.">+</a>
      </li>
      <li>
        <a href="javascript:void(0)" class="icon-help" {{action "openModal" "about_app"}} title="About">?</a>
      </li>
    </ul>
  </nav>
</header>

{{outlet}}
{{outlet "modal"}}

<footer class="l-footer">
  <p class="about">{{outlet "about_you"}}</p>

  <div class="logos">
    <div class="left">
      <a href="https://github.com/szimek/sharedrop" class="github" target="_blank" rel="noopener noreferrer"><span>Github</span></a>
      <iframe title="twitter" loading="lazy" class="twitter" src="https://platform.twitter.com/widgets/tweet_button.html?url=https%3A%2F%2Fwww.sharedrop.io&text=ShareDrop%20%E2%80%93%20easily%20and%20securely%20share%20files%20of%20any%20size%20directly%20between%20devices%20using%20your%20browser&count=none" scrolling="no" frameborder="0" allowtransparency="true" ></iframe>
    </div>
    <div class="right">
      <a href="http://www.webrtc.org/" class="webrtc" target="_blank" rel="noopener noreferrer"><span>WebRTC</span></a>
    </div>
  </div>
</footer>
